<template>
  <div class="inventory-option-group fix-all" @click.stop.prevent="transformIsShowPage()">
    <div class="content" @click.stop.prevent="noThings()" id="J_modifiers">
    <!-- v-if='item.isRequired' {{selectOption}} -->
      <div class="options">
        <dl v-for="(index, item) in inventoryOptionGroup.inventory.modifiers||inventoryOptionGroup.inventory.oldModifiers" class="content-optiongroup-dl j_options ">
          <dt class="text-muted" v-bind:class="{'required': item.isRequired}">{{ item.name}}{{item.isRequired?"*":""}}</dt>
          <div class="dd-wrap">
            <dd class="text-accent" v-for="option in item.options">
              <!-- <input type="radio" id="{{option.name}}" value="{{$index}}" name="{{item.id}}" v-model="option.picked"> -->
              <!-- v-bind:class="{'active': selectOption[index]==$index}"  v-bind:class="{'active': selectOption[item.id].indexOf(option.id)>-1}" -->
              <button @click.stop.prevent="handleOptions($index,item.id,option,index)" id="option-{{option.id}}" class="">{{option.name}}</button>
            </dd>
          </div>
        </dl>
      </div>
      <div class="md-padding remark">
        <label class="text-accent l">备注：</label>
        <!-- @focus.stop.prevent="fixBottom($event)" @blur.stop.prevent="fixBottom1($event)" -->
        <div  class="cell"><input class="input_remark" id="inventoryoption_input_remark" type="text" maxlength="50"  placeholder='口味、偏好等需求' v-model="remark"></input></div>
      </div>
      <button class="btn-bottom text-accent" @click.stop.prevent="comfirmOptions(inventoryOptionGroup.inventory.id)">确  认(￥{{amount}})</button>
    </div>
  </div>
</template>
<script type="text/javascript">
  import Modifieritem from '../business/modifieritem';
  import Modifiers from '../business/modifiers';
  import {changeMpjDialogOptions} from "../vuex/actions";
  export default {
    vuex:{
      actions:{
        changeMpjDialogOptions
      }
    },
    data: function(){
      return {
         selectOption:[],
         modifiers:{},
         remark:""
      }
    },

    created: function(){
      const self = this;
      // self.inventoryOptionGroup.inventory.modifiers.forEach(function(elem, i){
      //   self.selectOption[elem.id] = [];
      // });

      self.modifiers = new Modifiers(self.inventoryOptionGroup.inventory.modifiers || self.inventoryOptionGroup.inventoryItem.modifiers.items);
    },
    ready: function(){
      // debuggerArray.prototype.slice.call(list,0)
      // let elem = document.getElementsByClassName('j_options');
      // let array =  Array.from(elem);
      // array && array.forEach((ele) => {
      //   ele.getElementsByClassName('active')[0].click();
      // });
      // document.getElementById('inventoryoption_input_remark').focus();
      if(this.inventoryOptionGroup.inventoryItem&&this.inventoryOptionGroup.inventoryItem.modifiers){
        this.inventoryOptionGroup.inventoryItem.modifiers.items.forEach(v=>{
          v.options.forEach(v=>{
            var optionDom =  document.getElementById("option-"+v.id);
            optionDom.classList.add("active");
          })
        })
        //复制一次


        this.remark = this.inventoryOptionGroup.inventoryItem.extended.description;
        this.modifiers.copyModifiers(this.inventoryOptionGroup.inventoryItem.modifiers);

      }
    },
    beforeDestroy:function(){
      this.inventoryOptionGroup.inventory = {};
      this.inventoryOptionGroup.inventoryItem = null;
    },
    props:{
      inventoryOptionGroup:{
        type: Object,
        required: true
      },
      cart:{
        type:Object,
        required:true
      }
    },
    methods:{
      transformIsShowPage(){
        this.inventoryOptionGroup.show=false;
      },
      handleOptions: function(index,modifierId,option,i){
        const self = this;
        const optionId = "option-"+option.id;
        const optionDom = document.getElementById(optionId);
        const modifier = self.modifiers.items[i];
        if(modifier.singleton){
          Array.from(optionDom.parentNode.parentNode.querySelectorAll(".active")).forEach(v=>{
            if(v&&(v.id!=optionId  )){
              v.classList.remove("active");

              modifier.removeOption(v.id.substring(7,v.id.length));
            }
          })
        }
        if(optionDom.classList.contains("active")){
          optionDom.classList.remove("active");
          modifier.removeOption(option);
        }else {
          optionDom.classList.add("active");
          modifier.addOption(option);
        }
        // self.selectOption.push(option.id);
        // self.modifiers.generateOption(modifierId, option);
        // self.modifiers.items.forEach(modifier=>{
        //   modifier.options.forEach(option=>{
        //     self.selectOption[modifier.id].push(option.id);
        //   })
        // })
      },
      comfirmOptions: function(id){

        const self = this;
        const modifiers = Modifiers.getModifiersOfNoRequired(self.modifiers);
        if(modifiers.length>0){
          let content = "“";
          modifiers.forEach((v,i)=>{
            if(i>0){
              content+="、";
            }
            content += v.name;
          })
          self.changeMpjDialogOptions({
            iconType: "warn",
            content: content + "”是必选项",
            show: true,
            btnContent:"",
            autoCancel:2000
          });
          return;
        }
        //合并

        if(this.inventoryOptionGroup.inventoryItem){
          if(!this.inventoryOptionGroup.inventoryItem.modifiers){
            this.inventoryOptionGroup.inventoryItem.modifiers = self.modifiers;
          } else {
            this.inventoryOptionGroup.inventoryItem.modifiers.mergeModifiers(self.modifiers);
            this.inventoryOptionGroup.inventoryItem.setDescription(self.remark);
          }
        }else {
          const inventoryitem = self.cart.addInventoryOfHasRequired(self.inventoryOptionGroup.inventory, self.modifiers);
          inventoryitem.setDescription(self.remark);
        }
        //选项消失
        self.inventoryOptionGroup.show=false;
      },
      noThings: function(){
        return;
      }
    },
    computed:{
      amount(){
        let inventory = this.inventoryOptionGroup.inventory;
        let amount = inventory.price || this.inventoryOptionGroup.inventoryItem.price;
        amount+=this.modifiers.amount;
        return amount;
      }
    }
  }
</script>

<style lang='sass'>
	@import '../assets/sass/global/themes.scss';
  .inventory-option-group{background-color: rgba(0, 0, 0, 0.302);}
  .inventory-option-group .content{position:absolute;width: 100%;bottom: 0;background-color: white;}
  .inventory-option-group .options{max-height: 12rem;overflow-y: scroll;}
  .content-optiongroup-dl{margin-bottom: 10px;padding: 0 0.6rem}
  .content-optiongroup-dl:first-child{padding-top: 20px}
  .content-optiongroup-dl dt{padding: 0 10px 0 0;font-size: 15px;}
  .content-optiongroup-dl dt.required{color: $bg-color-primary;}
  .content-optiongroup-dl .dd-wrap{display: flex;flex-wrap: wrap;}
  .content-optiongroup-dl dd{display: inline-block;font-size: 13px;margin-top: 10px;}
  .content-optiongroup-dl dd button{margin-right: .35rem;padding: 7px 5px;height: 100%;word-wrap: break-word;border: 1px solid #919191;border-radius:5px;width: 2.7rem;;color: #919191;}
  .content-optiongroup-dl dd:nth-child(3n) button{margin-right: 0;}
  .content-optiongroup-dl dd button.active{background: $bg-color-primary;color: white;border: none;padding: 8px 0}
  .inventory-option-group .remark{
    line-height: 50px;border-top: 1px solid #e3e3e3;height: 50px;background-color: white;padding: 0 0.6rem;
    .input_remark{width: 100%;border: none;font-size: 13px;height: 85%};
  }
  .btn-bottom{width: 100%;height: 50px;background: $bg-color-primary;color: white}
</style>
